<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/font-awesome.min.css" />
    <link rel="stylesheet" href="../css/scrollBar.css" />

    <title>Xow</title>
    <style>
        .my-ctl{
            margin:5px 5px 5px 0px;

        }
    </style>




</head>
  <body>
 
    <div id="app" style="margin-left: 100px;" >

      <!--<div style="margin:10px 0px;">
        <button class="btn btn-primary" @click="openAdd"><i class="fa fa-plus"></i> 新增商品信息</button>
    </div> -->



        <form class="form-inline">

            <div class="input-group my-ctl">
                <div class="input-group-prepend">
                    <div class="input-group-text">名字</div>
                </div>
                <input type="text" class="form-control" style="width:150px;" v-model="query.item_name">
            </div>

            <div class="input-group my-ctl">
                <div class="input-group-prepend">
                    <div class="input-group-text">价格</div>
                </div>
                <input type="text" class="form-control" style="width:100px;" v-model="query.item_low_price">
                <div class="input-group-prepend input-group-append">
                    <div class="input-group-text">至</div>
                </div>
                <input type="text" class="form-control" style="width:100px;" v-model="query.item_high_price">
            </div>

            <div class="input-group my-ctl">
                <div class="input-group-prepend">
                    <div class="input-group-text">描述</div>
                </div>
                <input type="text" class="form-control" style="width:150px;" v-model="query.item_desc">
            </div>


            <div class="input-group my-ctl">
                <div class="input-group-prepend">
                    <div class="input-group-text">标签</div>
                </div>
                <!--<select class="custom-select" style="width:100px;" @change="goPage(1)">
                    <option value="">全部</option>
                    <option v-for="(label,value) in eduMap" :value="value">{{label}}</option>
                </select>-->


                <select class="form-control" style="width:200px;"  v-model="query.item_label">>
                    <option class="selectOption">书籍</option>
                    <option>衣物</option>
                    <option>电子产品</option>
                    <option>体育用品</option>
                    <option>食品饮料</option>
                    <option>美妆护肤</option>
                    <option>日常其他</option>
                </select>
            </div>





            <button type="button" class="btn btn-primary" @click=" getItemList" >查询</button>
        </form>


      <table class="table">
        <thead>
          <tr>

            <th>名字</th>

            <th>价格</th>

            <th>描述</th>

            <th>标签</th>

          </tr>

        </thead>
        <tbody>
          <tr v-for="item in itemList" :key="item.item_id">
            <!--<td>{{item.item_id}}</td>-->
            <td>{{item.item_name}}</td>
            <td>{{item.item_price}}</td>
            <!--<td>{{item.item_image}}</td>-->
            <td>{{item.item_desc}}</td>
            <td>{{item.item_label}}</td>
            <!--<td>{{item.status}}</td>-->

              <td>
                  <button type="button" class="btn btn-link"  @click="openUpd(item)" >修改</button>
                  <button type="button" class="btn btn-link"  @click="execDel(item)" >删除</button>
              </td>
        </tr>
        </tbody>
      </table>

        <div id="upd-win" style="display:none;padding:15px;">
            <form>

                <div class="form-group">
                    <label>名字：</label>
                    <input type="text" class="form-control" v-model="updData.item_name" >
                </div>
                <div class="form-group">
                    <label>价格：</label>
                    <input type="text" class="form-control" v-model="updData.item_price" >
                </div>


                <div class="form-group">
                    <label>描述：</label>
                    <input type="text" class="form-control" v-model="updData.item_desc" >
                </div>


                <div class="form-group">
                    <label>商品标签</label>
                    <select v-model="updData.item_label" class="form-control"  placeholder="请选择商品标签">
                        <option class="selectOption">书籍</option>
                        <option>衣物</option>
                        <option>电子产品</option>
                        <option>体育用品</option>
                        <option>食品饮料</option>
                        <option>美妆护肤</option>
                        <option>日常其他</option>
                    </select>
                </div>




                <button type="button" class="btn btn-primary"  @click="execUpd" >提交</button>
            </form>

        </div>

    </div>

    <script src="../js/jquery-3.6.0.slim.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js" ></script>
    <script src="../js/vue.global.js" ></script>
    <script src="../js/axios.min.js" ></script>
    <script src="../js/request.js" ></script>


    <script src="../layer/layer.js" ></script>
   
    <script>



        const  app = {
            data() {
                return {
                    itemList: [],
                    query: {//新增数据

                        item_name: '',
                        item_low_price: '',
                        item_high_price: '',
                        item_desc: '',
                        item_label: ''

                    },
                    addData: {//新增数据
                        item_id: '',
                        item_name: '',
                        item_price: '',
                        item_image: '',
                        item_desc: '',
                        item_label: '',
                        status: ''
                    },
                    addIdx:null,//新增窗口标识
                    updIdx:null,//修改窗口标识
                    id:null,
                    updData:{//修改数据
                        item_id: '',
                        item_name: '',
                        item_price: '',
                        item_image: '',
                        item_desc: '',
                        item_label: '',
                        status: ''
                    },
                };
            },
            methods: {


                getItemList() {

                    const loadIdx = layer.load();
                    request.get('/item/itemList',{params:this.query}).then((response) => {
                        layer.close(loadIdx);
                        this.itemList = response.data.data;
                    });
                },
                //打开窗口
               openAdd() {
                  /*  this.addIdx = layer.open({
                        type: 1,
                        title: '新增商品信息',
                        area: ['800px', '600px'],
                        content: $('#add-win')
                    });*/

                },
                //执行新增
                /*execAdd() {
                    const idx = layer.load();
                    request.post('http://localhost:8111/jd_demo_study_war_exploded/item/itemDoAdd', this.addData).then(res => {
                        layer.close(idx);
                        if (res.data.success) {
                            this.getItemList();
                            layer.close(this.addIdx);
                            layer.msg('新增商品信息成功！', {icon: 1});
                        }
                    }).catch(err => {
                        layer.close(idx);
                        layer.msg('新增商品信息失败！', {icon: 2});
                    });
                },*/
                //打开修改窗口的函数
                openUpd(item){
                    this.updData = {...item};//js解构 ,在这里作用：产生一个item对象的副本
                    this.updIdx = layer.open({
                        type: 1,
                        title: '修改需求信息',
                        area: ['800px', '600px'],
                        content: $('#upd-win')
                    });
                },
                //执行修改
                execUpd(){
                    const idx = layer.load();
                    request.post('/item/itemDoUpd',this.updData).then(res=>{
                        layer.close(idx);
                        if(res.data.success){
                            this.getItemList();
                            layer.close(this.updIdx);
                            layer.msg('修改需求信息成功！',{icon:1});
                        }
                    }).catch(err=>{
                        layer.close(idx);
                        layer.msg('修改需求信息失败！',{icon:2});
                    });
                },
                execDel(item){
                    const idx = layer.load();
                    request.post('item/itemDoDel',item).then(res=>{
                        layer.close(idx);
                        if(res.data.success){
                            this.getItemList();
                            layer.close(this.updIdx);
                            layer.msg('删除需求成功！',{icon:1});
                        }else{
                            layer.msg(res.data.message,{icon:2});
                        }
                    }).catch(err=>{
                        layer.close(idx);
                        layer.msg('删除需求失败！',{icon:2});
                    });
                }


            },
            mounted() {
                /*request.get('/item/itemList').then((response) => {
                    this.itemList = response.data.data;
                    const loadIdx = layer.load();
                    console.log(response);
                    layer.close(loadIdx);


                });*/
                this.getItemList();


            }
        };

      Vue.createApp(app).mount('#app')

    </script>

    
  </body>
</html>